<template>
	<!-- #ifdef MP-WEIXIN || MP-TOUTIAO-->
	<view class=" bg-cfff w-100 " @touchmove.prevent>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN || MP-TOUTIAO-->
		<view class="w-100 " @touchmove.prevent style="padding-bottom: 128rpx">
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN || MP-TOUTIAO-->
			<view>
				<view class="tabbar bg-cfff w-100">
					<view class="d-flex justify-content-between py-1">
<!-- 						<view class="d-flex tab align-items-center" :data-index="i" :class="i?'line':''"
							:data-path="v.pagePath" @tap="switchTab" v-for="v,i in list" :key="i">
							<image :src="selected == i ? v.selectedIconPath : v.iconPath" mode=""></image>
							<text class="text-theme text-18px pl-1"
								:style="{color: selected == i ? selectedColor : color}">{{v.text}}</text>
						</view> -->
						<view class="d-flex tab align-items-center justify-content-center" @tap="show=true">
							<image src="../../static/website/logo.svg" mode=""></image>
							<text class="text-theme text-18px pl-1"
								style="color:#303133;">目录</text>
						</view>
						<view class="line"></view>
						<view class="d-flex tab align-items-center justify-content-center" data-index="1" 
							data-path="pages/website/share" @tap="switchTab" >
							<image src="../../static/website/yunying.svg" mode=""></image>
							<text class="text-theme text-18px pl-1"
								style="color: #303133;">运营开发分享</text>
						</view>
						<!-- 		<view class="line"></view>
					<view class="d-flex tab align-items-center" @tap="jumpGO('website/my')">
						<image src="../../static/website/home.svg" mode=""></image>
						<text class="text-4CC text-18px pl-1">我的</text>
					</view> -->
					</view>
				</view>
			</view>
			<!-- #endif -->

			<!-- #ifdef H5 || APP || APP-PLUS || APP-PLUS-NVUE -->
			<view class=" bg-cfff w-100 position-fixed" style="top: 0;z-index: 999;">
				<view class="d-flex   bg-cfff align-items-center pl-2 pr-3 justify-content-between">
					<view class=" d-flex align-items-center" style="height: 128rpx;">
						<view class="logo">
							<image class="w-100 h-100" src="../../static/website/logo.svg" mode=""></image>
						</view>
						<view class="text-23px pl-1">成都亚克茜科技</view>
					</view>
					<view class=" d-flex align-items-center">
	<!-- 					<view v-if="!vuex_has_login" class="mulu" @click="weblogin">
							登入
						</view> -->
						<!-- 登录后头像 -->
		<!-- 				<image v-else @tap="jumpGO('website/my')" class="avatar round" :src="vuex_user.avatar ? vuex_user.avatar : '/h5/static/icon/nologin_avatar.svg'"
							mode="aspectFit"></image>
							
						<view class="line"></view> -->
						<view class="mulu" @tap="show=true">菜单</view>
					</view>
				</view>

			</view>
			<!-- #endif -->

			<!-- #ifdef MP-WEIXIN ||MP-TOUTIAO-->
			<u-popup :show="show" mode="left" @close="close" @open="open">
				<!-- #endif -->
				<!-- #ifdef H5 || APP || APP-PLUS || APP-PLUS-NVUE -->
				<u-popup :show="show" mode="right" @close="close" @open="open">
					<!-- #endif -->
					<view class="catalogue">
						<view class="d-flex justify-content-end" @tap="close">
							<image src="../../static/website/close.svg" class="img-20px" mode=""></image>
						</view>
						<view class="text-center title pb-4">
							成都<text>亚克茜</text>科技
						</view>
						<view class="list">
							<view class="first-level-directory bottom-line" @tap="jumpGO('index/index')">
								首页
							</view>
							<view class="">
								<view @tap="muluShow=!muluShow"
									class="d-flex justify-content-between align-items-center first-level-directory bottom-line">
									<view class="">定制开发 </view>
									<image src="../../static/website/solid_down_arrow.svg" :class="muluShow?'rotate':''"
										class="img-16px " mode=""></image>
								</view>
								<div v-show="muluShow">
									<view class="first-level-directory bottom-line text-nomal" style="padding-left:41px"
										@tap="jumpGO('website/customDevelopment')">
										网站定制开发
									</view>
									<view class="first-level-directory bottom-line text-nomal" style="padding-left:41px"
										@tap="jumpGO('website/miniprogramDevelopment')">
										小程序定制开发
									</view>
								</div>
							</view>
							<view class="first-level-directory bottom-line" @tap="jumpGO('website/solution')">
								行业解决方案
							</view>
							<view class="first-level-directory bottom-line" @tap="jumpGO('website/casePresentation')">
								案例展示
							</view>
							<view class="first-level-directory bottom-line" @tap="jumpGO('website/share')">
								互联网运营分享
							</view>
							<view class="first-level-directory " @tap="jumpGO('website/contactUs')">
								联系我们
							</view>
						</view>
					</view>
				</u-popup>
		</view>
</template>

<script>

	export default {
		name: "catalogue",
		data() {
			return {
				show: false,
				muluShow: true,
				selected: uni.getStorageSync('selected') || 0,
				color: "#C0C4CC",
				selectedColor: "#40C6A1",
				tabbar: [{
					title: '目录',
					selectImg: '../../static/website/logo.svg',
					img: '../../static/website/logo.jpg'
				}, {
					title: '运营开发分享',
					selectImg: '../../static/website/yunying.svg',
					img: '../../static/website/yunying.svg'
				}],
				list: [{
						"iconPath": "../../static/website/logo.jpg",
						"selectedIconPath": "../../static/website/logo.svg",
						"text": "目录",
						"pagePath": "pages/index/index"
					},
					{
						"iconPath": "../../static/website/yunying.svg",
						"selectedIconPath": "../../static/website/yunying.svg",
						"text": "运营开发分享",
						"pagePath": "pages/website/my"
					}
				],
				curRoute: '',
			};
		},
		mounted() {
			
		},
		methods: {

			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			jumpGO(url) {
				uni.reLaunch({
					url: `/pages/${url}`
				})
			},
			switchTab({
				currentTarget: {
					dataset: {
						path,
						index
					}
				}
			}) {
				this.show = false
				uni.setStorageSync('selected', index);
				this.selected = index
				if (!index) {
					this.show = true
					return 
				}
				if (path == this.curRoute) return
				uni.reLaunch({
					url: '/' + path
				})


			},
		}
	}
</script>

<style lang="scss" scoped>
	.logo {
		width: 80rpx;
		height: 80rpx;
	}

	.text-23px {
		font-size: 46rpx;
	}

	.avatar {
		width: 66rpx;
		height: 66rpx;
		border: 4rpx solid #40C6A1;
		border-radius: 50%;
	}

	.line {
		height: 120rpx;
		border-left: 2rpx solid #E7E7E7;
		// margin: 0 24rpx 0px 20rpx;
	}

	.mulu {
		font-size: 40rpx;
		font-family: PingFangSC-Light, PingFang SC;
		font-weight: 300;
		color: #606266;
	}

	.catalogue {
		width: 514rpx;
		background: #F3F4F6;
		height: 100%;
		padding: 50rpx 26rpx;

		.title {
			font-size: 44rpx;
			font-weight: 600;
			color: #303133;
			line-height: 60rpx;
			padding-top: 28rpx;

			text {
				color: #40C6A1;
			}
		}

		.list {
			font-size: 32rpx;
			font-weight: 500;
			color: #303133;
			line-height: 44rpx;

			.first-level-directory {
				padding: 24rpx 18rpx 28rpx;
			}

			.bottom-line {
				width: 100%;
				border-bottom: 2rpx solid #E6E6E6;
			}

			.rotate {
				transform: rotate(180deg);
				transition: all 0.3s ease;
			}
		}
	}

	.tabbar {
		position: fixed;
		bottom: 0;
		z-index: 999999;
		border-radius: 16rpx 16rpx 0 0;

		image {
			width: 60rpx;
			height: 60rpx;
		}

		.tab {
			// padding: 0 106rpx;
			width: 50%;
		}

		.line {
			height: 112rpx;
			border-left: 2rpx solid #F0F0F0;
		}
	}

	.text-nomal {
		font-weight: 400;
	}

	.text-4CC {
		color: #C0C4CC;
	}
</style>
